<template>
    <el-aside>
        <el-menu :default-active="$route.path" router>
            <el-sub-menu index="personUnit">
                <template #title>
                    <svg class="icon2" aria-hidden="true">
                        <use xlink:href="#icon-wuzi"></use>
                    </svg>
                    <span>个人中心</span>
                </template>
                <el-menu-item index="/Personal">
                    用户信息
                </el-menu-item>
                <el-menu-item index="/Personal/personPermission">
                    用户权限
                </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="toolbox">
                <template #title>
                    <svg class="icon2" aria-hidden="true">
                        <use xlink:href="#icon-briefcase-full"></use>
                    </svg>
                    <span>工具箱</span>
                </template>
                <el-menu-item index="/Personal/personFiles">
                    文件夹
                </el-menu-item>
                <el-menu-item index="/Personal/personProjects">
                    项目列表
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-aside>

    <el-main>
        <div class="personContain">
            <router-view></router-view>
        </div>
    </el-main>
</template>

<script>
export default {
    
}
</script>

<style>
.personContain{
    height: 100%;
    border-radius: 10px;
    /* border: 1px solid #d1d1d1; */
    background-color: white;
}
.el-main{
    padding: 14px;
    background-color: ghostwhite;
}
.el-aside{
    margin-top: 0px;
    width: 233px;
    border-right: 1px solid #eee;
    height: calc(100vh - 50px);
}
.el-sub-menu .icon2{
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color: #2B7BD0;
    font-size: 18px;
    margin-left: 10px;
}

.el-sub-menu span{
    font-size: 14px;
    margin-left: 6px;
}
.el-menu-item{
    margin-left: 12px;
}
</style>